<template>
  <div class="navigation">
    <div class="brand">
      <h1>排课管理系统</h1>
    </div>
    <el-menu
      class="side-menu"
      :default-active="currentPage"
      @select="handleSelect"
      :router="false"
    >
      <template v-if="role === 'student'">
        <el-menu-item index="student-home">
          <el-icon><User /></el-icon>
          <span>学生首页</span>
        </el-menu-item>
        <el-menu-item index="student-profile">
          <el-icon><Avatar /></el-icon>
          <span>个人中心</span>
        </el-menu-item>
        <el-menu-item index="student-schedule">
          <el-icon><Calendar /></el-icon>
          <span>我的课表</span>
        </el-menu-item>
        <el-menu-item index="student-course">
          <el-icon><Reading /></el-icon>
          <span>选课管理</span>
        </el-menu-item>
        <el-menu-item index="student-grades">
          <el-icon><Trophy /></el-icon>
          <span>成绩查询</span>
        </el-menu-item>
        <el-menu-item index="student-notices">
          <el-icon><Bell /></el-icon>
          <span>学习通知</span>
        </el-menu-item>
        <el-menu-item index="student-request">
          <el-icon><Document /></el-icon>
          <span>我的诉求</span>
        </el-menu-item>
      </template>
      <template v-else-if="role === 'teacher'">
        <el-menu-item index="teacher-home">
          <el-icon><Avatar /></el-icon>
          <span>教师首页</span>
        </el-menu-item>
        <el-menu-item index="teacher-profile">
          <el-icon><User /></el-icon>
          <span>个人中心</span>
        </el-menu-item>
        <el-menu-item index="teacher-schedule">
          <el-icon><Calendar /></el-icon>
          <span>我的课表</span>
        </el-menu-item>
        <el-menu-item index="teacher-grade">
          <el-icon><Reading /></el-icon>
          <span>成绩管理</span>
        </el-menu-item>
        <el-menu-item index="teacher-workload">
          <el-icon><TrendCharts /></el-icon>
          <span>工作量统计</span>
        </el-menu-item>
        <el-menu-item index="teacher-students">
          <el-icon><User /></el-icon>
          <span>学生管理</span>
        </el-menu-item>
        <el-menu-item index="teacher-course-review">
          <el-icon><Document /></el-icon>
          <span>选课审核</span>
        </el-menu-item>
        <el-menu-item index="teacher-notice">
          <el-icon><Bell /></el-icon>
          <span>班级通知</span>
        </el-menu-item>
        <el-menu-item index="teacher-my-request">
          <el-icon><Document /></el-icon>
          <span>我的诉求</span>
        </el-menu-item>
      </template>
              <template v-else-if="role === 'admin'">
                <el-menu-item index="admin-home">
                  <el-icon><Setting /></el-icon>
                  <span>管理员首页</span>
                </el-menu-item>
                <el-menu-item index="admin-profile">
                  <el-icon><User /></el-icon>
                  <span>个人中心</span>
                </el-menu-item>
                <el-menu-item index="student">
                  <el-icon><User /></el-icon>
                  <span>学生管理</span>
                </el-menu-item>
                <el-menu-item index="teacher">
                  <el-icon><Avatar /></el-icon>
                  <span>教师管理</span>
                </el-menu-item>
                <el-menu-item index="clazz">
                  <el-icon><User /></el-icon>
                  <span>班级管理</span>
                </el-menu-item>
                <el-menu-item index="course">
                  <el-icon><Reading /></el-icon>
                  <span>课程管理</span>
                </el-menu-item>
                <el-menu-item index="classroom">
                  <el-icon><OfficeBuilding /></el-icon>
                  <span>教室管理</span>
                </el-menu-item>
                <el-menu-item index="schedule">
                  <el-icon><Calendar /></el-icon>
                  <span>排课管理</span>
                </el-menu-item>
                <el-menu-item index="schedule-statistics">
                  <el-icon><TrendCharts /></el-icon>
                  <span>排课统计</span>
                </el-menu-item>
                <el-menu-item index="admin">
                  <el-icon><Setting /></el-icon>
                  <span>管理员管理</span>
                </el-menu-item>
                <el-menu-item index="admin-notice">
                  <el-icon><Bell /></el-icon>
                  <span>通知管理</span>
                </el-menu-item>
                <el-menu-item index="admin-request">
                  <el-icon><Document /></el-icon>
                  <span>诉求管理</span>
                </el-menu-item>
              </template>

      <!-- 通用：退出登录 -->
      <el-menu-item index="logout">
        <el-icon><SwitchButton /></el-icon>
        <span>退出登录</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup>
import { User, Avatar, Setting, SwitchButton, Calendar, TrendCharts, Document, Reading, Trophy, OfficeBuilding, Bell } from '@element-plus/icons-vue'

const emit = defineEmits(['page-change', 'logout'])
const currentPage = defineModel('currentPage', { default: 'admin-home' })
const props = defineProps({ role: { type: String, default: '' } })
const role = props.role

const handleSelect = (key) => {
  if (key === 'logout') {
    emit('logout')
    return
  }
  currentPage.value = key
  emit('page-change', key)
}
</script>

<style scoped>
.navigation {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
}

.brand {
  padding: 20px 16px;
  color: #ffffff;
}

.brand h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.side-menu {
  border-right: none;
  background: transparent;
  color: #fff;
  --el-menu-text-color: #f0f3ff;
  --el-menu-hover-text-color: #ffffff;
  --el-menu-active-color: #ffffff;
  --el-menu-bg-color: transparent;
  --el-menu-hover-bg-color: rgba(255,255,255,0.12);
  --el-menu-item-height: 44px;
}

.side-menu :deep(.el-menu-item) {
  margin: 4px 8px;
  border-radius: 8px;
}

.side-menu :deep(.el-menu-item.is-active) {
  background: rgba(255,255,255,0.22);
  font-weight: 600;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .navigation { height: auto; }
}

@media (max-width: 480px) {
  .brand { padding: 16px 12px; }
}
</style>

